<template>
    <view class="pages">
        <view class="invite-fans flex-col col-center">
            <image :src="path" mode="widthFix" class="poster"></image>
            <invite-poster v-if="showPoster" :config="{
                yaoqingIntegral:yaoqingIntegral,
                name:appConfig.name,
				avatar: userInfo.avatar,
				nickname: userInfo.nickname,
				code: inviteCode,
				link: link,
				qrCode: qrCode,
				poster: poster,
				money: money,
				cname: cname, 
				
   }" @success="handleSuccess" />
            <view class="bg-white footer flex-s">
                <!-- <view class="m-b-40">
                    <view class="m-b-10 sm lighter">我的邀请码</view>
                    <view class="flex row-between">
                        <view class="font-size-44">{{inviteCode}}</view>
                        <view class="sm m-r-30 copy-btn" @tap="onCopy(inviteCode)">点击复制</view>
                    </view>
                </view> -->
                <!-- #ifndef H5  -->
				<button class="navBtn navBgBtn" open-type="share">转发好友</button>
                <button class="navBtn navBgBtn save-btn " @tap="saveImageToAlbum">保存到相册</button>
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <button class="save-btn br60" size="lg">长按保存到相册</button>
                <!-- #endif -->
            </view>
        </view>
        <loading-view v-show="loading"></loading-view>
    </view>
</template>

<script>
    import {
        apiMnpQrCode
    } from '@/api/app'
    import {
        baseURL,
        basePath
    } from '@/config/app'
    import {
        mapGetters
    } from 'vuex'

    import {
        apiDistributionPoster,
		GetCouponInfo,
    } from '@/api/user'
    import {
        apiDrawIntegral
    } from "@/api/store"
	import {
		copy
	} from '@/utils/tools.js'
    export default {
        data() {
            return {
                yaoqingIntegral:0,
                path: '',
                qrCode: '',
                loading: true,
                showPoster: true,
                poster: '',
                money: '',
                cname: '',
                coupon_id: '',
            };
        },

        async onLoad(option) {
            await this.apiDrawIntegral()
            await this.getPoster()
            await this.GetCouponInfo(option)
            // #ifdef MP-WEIXIN
            // this.getMnpQrCode()
            // #endif


            // #ifdef APP-PLUS || H5
            this.showPoster = true
            // #endif

        },

        methods: {
			onShareAppMessage() {
				 return {
			      title: '森歌官方商城',
					path: `/bundle/pages/coupondetail?coupon_id=${this.coupon_id}&give_user_id=${this.userInfo.id}`
				  // ${this.coupon_id}&&give_user_id=${this.userInfo.id} 
			   //    path: `/bundle/pages/coupondetail?coupon_id=${this.coupon_id}&&give_user_id=${userInfo.id}`
			   //    path: `bundle/pages/coupondetail?invite_code=${this.inviteCode}`
			    }
			},
			async GetCouponInfo(option){//
			console.log('option' ,option)
			    const {
			        code,
			        data
			    } = await GetCouponInfo({id:option.id})
			    if (code == 1) {
					// console.log('data',data)
					this.poster = data.coupon_poster
					this.qrCode = data.coupon_code.data.qr_code 
					this.money = data.money 
					this.cname = data.name
					this.coupon_id = data.id
			    }
			},
            async apiDrawIntegral(){//邀请获得的积分
                const {
                    code,
                    data
                } = await apiDrawIntegral({})
                if (code == 1) {
                    this.yaoqingIntegral = data[0]
                }
            },
			onCopy(text) {
				copy(text)
			},
            async getPoster() { //海报背景
                const res = await apiDistributionPoster()
                // this.poster = res.data.poster
            },
            getMnpQrCode() {
                apiMnpQrCode({
                    type: 0,
                    url: 'pages/index/index'
                }).then(res => {
                    console.log(res)
                    // this.qrCode = res.data.qr_code
                    this.showPoster = true
                })
            },
            saveImageToAlbum() {
                // #ifndef H5
                uni.saveImageToPhotosAlbum({
                    filePath: this.path,
                    success: res => {
                        this.$toast({
                            title: "保存成功"
                        });
                    },
                    fail: err => {
                        this.$toast({
                            title: '保存失败'
                        });
                    }
                });
                // #endif

                // #ifdef H5
                this.$toast({
                    title: '请长按图片保存'
                })
                // #endif

            },
            handleSuccess(val) {
                this.path = val
                this.loading = false
            }
        },
        computed: {
            ...mapGetters(['inviteCode', 'userInfo','appConfig']),
            link() {
                return `${baseURL}${basePath}?invite_code=${this.inviteCode}`
            }
        }
    };
</script>
<style lang="scss">
    page {
        padding: 0;
        background-color: #ffffff
    }
	.navBtn{
		display: inline-block;
		margin-top: 20rpx;
		width: 340rpx;
		height: 78rpx;
		text-align: center;
		font-size: 31rpx;
		font-weight: 400;
		color: #F7301B;
		line-height: 78rpx;
		background: #FFFFFF;
		border: 1px solid #F8341C;
		border-radius: 39rpx;
	}
	.navBgBtn{
		color: #FFF;
		border: 1px solid #F8341C;
		background: #F8341C;
	}
    .invite-fans {
        min-height: 100vh;
        overflow: hidden;

        .poster {
            width: 600rpx;
            margin: 40rpx 0;
        }

        .footer {
			margin-top: -216rpx;
            padding: 30rpx;
            width: 100%;
        }

        .copy-btn {
            color: $-color-primary;
        }

        .save-btn {
            color: #fff;

            background-color: $-color-primary;
            ;
        }
    }
</style>
